<template>
  <div class="roleListMobile">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  props: ["Place"],
  name: "roleListMobile",
  data() {
    return {
      images: [],
    }
  },
  methods: {
    ...mapMutations(['setRoleL']),
    // 获取角色信息
    async getRole() {
      await this.axios.get('http://localhost:4000/',
          {
            params: {
              "place": this.Place
            }
          }).then((response) => {
        this.setRoleL(response.data);
        // console.log(this.$store.state.roleL.length);
        this.getRoleImg();
      })
    },
    // 获取图片
    getRoleImg() {
      for(let i = 0; i < this.$store.state.roleL.length; i++) {
        this.images[i] = this.$store.state.roleL[i].img;
      }
    }
  },
  mounted() {
    this.getRole();
  }
}
</script>

<style lang="scss" scoped>
.roleListMobile {
  height: 100%;
  width: 100%;
  .van-swipe {
    width: 100%;
    height: 100%;
    .van-swipe-item {
      width: 100%;
      height: 100%;
      text-align: center;
      overflow: hidden;
      img {
        //width: 100%;
        display: inline-block;
        margin: 0 -100%;
      }
    }
  }

}
</style>